<template>
  <div class="chatList">
    <div class="search_box">
      <Input prefix="ios-search" placeholder="搜索用户名称" @on-enter="bindSearch" @on-change="inputChange">
      <Icon slot="prepend" type="ios-search" />
      <Poptip v-model="visible" slot="append" placement="right-start" width="350" @on-popper-show="onPopperShow">
          <Icon type="ios-funnel-outline" />
          <Tabs v-model="tabOn" slot="content">
              <TabPane label="标签筛选" name="1">
                  <div class="item-group">
                      <div v-for="item in labelList" :key="item.id" class="item">
                        <div class="item-title">{{ item.name }}</div>
                        <div class="cell-group">
                            <span v-for="cell in item.label" :key="cell.id" :class="{ on: cell.id == item.labelOn }" class="cell" @click="item.labelOn = (cell.id == item.labelOn ? -1 : cell.id)">{{ cell.label }}</span>
                        </div>
                    </div>
                  </div>
                  <div class="button-group">
                      <Button type="primary" ghost @click="visible = false">取消</Button>
                      <Button type="primary" @click="onFilter">确定</Button>
                  </div>
              </TabPane>
              <TabPane label="分组筛选" name="2">
                  <div class="item-group">
                      <div class="item">
                        <div class="cell-group">
                            <span v-for="cell in userGroupList" :key="cell.id" :class="{ on: cell.groupOn }" class="cell" @click="cell.groupOn = !cell.groupOn">{{ cell.group_name }}</span>
                        </div>
                    </div>
                  </div>
                  <div class="button-group">
                      <Button type="primary" ghost @click="visible = false">取消</Button>
                      <Button type="primary" @click="onFilter">确定</Button>
                  </div>
              </TabPane>
          </Tabs>
      </Poptip>
      </Input>
    </div>
    <div class="tab-head">
      <div class="item" :class="{active:item.key == hdTabCur}" v-for="(item, index) in hdTab" :key="index" @click="changeTab(item)">{{item.title}}</div>
    </div>
    <div class="scroll-box">

      <vue-scroll :ops="ops" @handle-scroll="handleScroll" v-if="userList.length>0">
        <div class="chat-item" v-for="(item,index) in userList" :key="index" :class="{active:curId == item.id}" @click="selectUser(item,index)">
          <div class="avatar">
            <img v-lazy="item.avatar" alt="">
            <div class="status" :class="{off:item.online == 0}"></div>
          </div>
          <div class="user-info">
            <div class="hd">
              <span class="name line1">{{item.nickname}}</span>
              <template v-if="item.type == 2">
                <span class="label">小程序</span>
              </template>
              <template v-if="item.type == 3">
                <span class="label H5">H5</span>
              </template>
              <template v-if="item.type == 1">
                <span class="label wechat">公众号</span>
              </template>
              <template v-if="item.type == 0">
                <span class="label pc">PC端</span>
              </template>
            </div>
            <div class="bd line1">
              <template v-if="item.message_type <=2">{{item.message}}</template>
              <template v-if="item.message_type ==3">[图片]</template>
              <template v-if="item.message_type ==5">[商品]</template>
              <template v-if="item.message_type ==6">[订单]</template>
            </div>
          </div>
          <div class="right-box">
            <div class="time">{{item.update_time | toDay}}</div>
            <div class="num">
              <Badge :count="item.mssage_num">
                <a href="#" class="demo-badge"></a>
              </Badge>
            </div>
          </div>
        </div>
      </vue-scroll>
      <empty v-else msg="暂无用户列表" status="1"></empty>
    </div>

  </div>
</template>

<script>
import { Socket } from '@/libs/socket';
import dayjs from 'dayjs'
import { record, userLabel, userGroupApi } from '@/api/kefu'
import { HappyScroll } from 'vue-happy-scroll'
import empty from "../../components/empty";
import { forEach } from "../../../../libs/tools";
export default {
  name: "chatList",
  props: {
    userOnline: {
      type: Object,
      default: function() {
        return {}
      }
    },
    newRecored: {
      type: Object,
      default: function() {
        return {}
      }
    },
    searchData: {
      type: String,
      default: ''
    },
    isShow:{
      type: Boolean,
      default: false
    }
  },
  components: {
    HappyScroll,
    empty
  },
  watch: {
    userOnline: {
      handler(nVal, oVal) {
        if(nVal.hasOwnProperty('user_id')) {
          this.userList.forEach((el, index) => {
            if(el.to_user_id == nVal.user_id) {
              el.online = nVal.online
              if(nVal.online == 1) {
                this.$Notice.info({
                  title: '上线通知',
                  desc: `${el.nickname}上线`
                });
              }

            }
          })
        }
      },
      deep: true
    },
    searchData: {
      handler(nVal, oVal) {
        if(nVal != oVal) {
          this.nickname = nVal
          this.page = 1
          this.isScroll = true
          this.userList = []
          this.isSearch = true
          this.getList()
        }
      },
      deep: true
    },
    isShow: {
      handler(nVal, oVal) {
        console.log('isShow',nVal)
        if(nVal) {
          this.wsStart()
        }
      },
      deep: true
    }
  },
  data() {
    return {
      hdTabCur: 1,
      hdTab: [
        {
          key: 1,
          title: '会话列表'
        },
        {
          key: 0,
          title: '用户列表'
        }

      ],
      userList: [],
      curId: '',
      page: 1,
      limit: 15,
      isScroll: true,
      nickname: '',
      labelId: '',
      groupId: '',
      isSearch: false,
      ops: {
        vuescroll: {
          mode: 'native',
          enable: false,
          tips: {
            deactive: 'Push to Load',
            active: 'Release to Load',
            start: 'Loading...',
            beforeDeactive: 'Load Successfully!'
          },
          auto: false,
          autoLoadDistance: 0,
          pullRefresh: {
            enable: false
          },
          pushLoad: {
            enable: true,
            auto: true,
            autoLoadDistance: 10
          }
        },
        bar: {
          background: '#393232',
          opacity: '.5',
          size: '5px'
        }
      },
      visible: false,
    //   labelOn: -1,
    //   groupOn: -1,
      labelList: [],
      userGroupList: [],
      tabOn: '1'
    }
  },
  filters: {
    toDay: function(value) {
      if(!value) return ''
      return dayjs.unix(value).format('M月D日 HH:mm')

    }
  },
  mounted() {

    this.bus.$on('change', data => {
    //   this.nickname = data
    for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
            this[key] = data[key];
        }
    }
    })
    this.getList();
    // this.userLabel();
    // this.wsStart();
    userLabel().then(res => {
        res.data.forEach(item => {
            item.labelOn = -1;
        });
        this.labelList = res.data;
    });
    userGroupApi().then(res => {
        res.data.forEach(item => {
            item.groupOn = false;
        });
        this.userGroupList = res.data;
    });
  },
  methods: {
      onPopperShow() {
          this.labelId = '';
          this.groupId = '';
      },
      onFilter() {
          if (this.tabOn == '1') {
            this.labelList.forEach(item => {
                if (item.labelOn != -1) {
                    this.labelId += this.labelId ? `,${item.labelOn}` : item.labelOn;
                }
            });
            // if (!this.labelId) {
            //     return this.$Message.info('请选择标签筛选条件');
            // }
          } else {
            this.userGroupList.forEach(item => {
                if (item.groupOn) {
                    this.groupId += this.groupId ? `,${item.id}` : item.id;
                }
            });
            // if (!this.groupId) {
            //   return this.$Message.info('请选择分组筛选条件');
            // }
          }
          this.nickname = '';
          this.page = 1;
          this.isScroll = true
          this.userList = []
          this.isSearch = true
          this.getList();
          this.visible = false;
      },
    // 搜索
    bindSearch(e) {
      this.$emit('search', e.target.value);
    },
    // inputChange
    inputChange(e) {
      console.log(e.target.value)
      this.bus.$emit('change', { nickname: e.target.value })
    },
    deleteUserList(item){
      this.userList.forEach((el, index, arr) => {
        if(el.id == item.id){
          this.userList.splice(index,1)
        }
      })
      if(this.userList.length){
        this.selectUser(this.userList[0],0)
      }
    },
    updateUserList(data,op){
      let ids = [];
      this.userList.map(item=>{
        ids.push(item.id)
        if (item.id === data.id) {
          item.message = data.message
          item._update_time = data._update_time
        }
      })
      if(ids.indexOf(data.id) === -1 && op) {
        this.userList.unshift(data);
      }
    },
    wsStart() {
      let that = this
      this.bus.pageWs.then(ws => {
        // 用户转接
        ws.$on('transfer', data => {
          let status = false
          that.userList.forEach((el, index, arr) => {
            if(data.recored.id == el.id) {
              status = true
              let oldVal = data.recored
              arr.splice(index, 1)
              if(index == 0) {
                oldVal.index = index
                this.$emit('setDataId', oldVal)
                oldVal.mssage_num = 0
              }
              arr.unshift(oldVal)

              this.$Notice.info({
                title: '您有一条转接消息！'
              });
            }
          })
          if(!status) {
            if(data.recored.is_tourist == this.hdTabCur) { this.userList.unshift(data.recored) }
          }
        })
        //已被转接走
        ws.$on('rm_transfer',data=>{
          let rmIndex = -1;
          that.userList.forEach((value, index) => {
            if(value.id == data.recored.id){
              rmIndex = index
            }
          })
          if(rmIndex !== -1){
            this.userList.splice(rmIndex,1)
            if(this.userList.length){
              this.$emit('setDataId', this.userList[0])
            }
          }
        })
        ws.$on('mssage_num', data => {
          // console.log('mssage_num',data)
          if(data.recored.id) {
            let status = false
            that.userList.forEach((el, index, arr) => {
              if(data.recored.id == el.id) {
                status = true
                let oldVal = data.recored
                arr.splice(index, 1)
                arr.unshift(oldVal)
              }
            })
            if(!status) {
              if(data.recored.is_tourist == this.hdTabCur) { this.userList.unshift(data.recored) }
            }
          }


          if(data.recored.is_tourist != this.hdTabCur && data.recored.id) {
            this.$Notice.info({
              title: this.hdTabCur ? '用户发来消息啦！' : '游客发来消息啦！'
            });
          }

        })
      });
    },
    //切换
    changeTab(item) {
      if(this.hdTabCur == item.key) return
      this.hdTabCur = item.key
      this.isScroll = true
      this.page = 1
      this.userList = []
      this.$emit('changeType', item.key)
      this.getList()
    },
    getList() {
      if(!this.isScroll) return
      record({
        nickname: this.nickname,
        labelId: this.labelId,
        groupId: this.groupId,
        page: this.page,
        limit: this.limit,
        is_tourist: this.hdTabCur === 1 ? '' : 0
      }).then(res => {
        if(res.data.length > 0) {
          res.data[0].mssage_num = 0
          this.isScroll = res.data.length >= this.limit

          this.userList = this.userList.concat(res.data)

          if(this.page == 1 && res.data.length > 0 && !this.isSearch) {
            this.curId = res.data[0].id
            res.data[0].index = 0
            this.$emit('setDataId', res.data[0])
          }
          this.page++
        } else {
          this.$emit('setDataId', 0)
        }

      })
    },
    chartReachBottom() {
      this.getList()
    },
    // 选择用户
    selectUser(item,index) {
      if(this.curId == item.id) return
      item.mssage_num = 0
      this.curId = item.id
      item.index = index;
      this.$emit('setDataId', item)
    },
    handleScroll(vertical, horizontal, nativeEvent) {
      if(vertical.process == 1) {
        this.getList()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.chatList {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 742px;
  border-right: 1px solid #ECECEC;

  .tab-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    flex-shrink: 0;
    padding: 0 52px;
    font-size: 14px;
    color: #000000;

    .item {
      position: relative;
      cursor: pointer;

      &:after {
        display: none;
        content: ' ';
        position: absolute;
        left: 50%;
        bottom: -15px;
        transform: translateX(-50%);
        height: 2px;
        width: 100%;
        background: #1890FF;
      }

      &.active {
        color: #1890FF;

        &:after {
          display: block;
        }
      }
    }
  }

  .scroll-box {
    flex: 1;
    height: 500px;
    overflow: hidden;
  }

  .chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    height: 74px;
    box-sizing: border-box;
    border-left: 3px solid transparent;
    cursor: pointer;

    &.active {
      background: #EFF0F1;
      border-left: 3px solid #1890FF;
    }

    .avatar {
      position: relative;
      width: 40px;
      height: 40px;

      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .status {
        position: absolute;
        right: 3px;
        bottom: 0;
        width: 8px;
        height: 8px;
        background: #48D452;
        border: 1px solid #fff;
        border-radius: 50%;

        &.off {
          background: #999999;
        }
      }
    }

    .user-info {
      width: 155px;
      margin-left: 12px;
      margin-top: 5px;
      font-size: 16px;

      .hd {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.65);

        .name {
          max-width: 67%;
        }

        .label {
          margin-left: 5px;
          color: #3875EA;
          font-size: 12px;
          background: #D8E5FF;
          border-radius: 2px;
          padding: 1px 5px;

          &.H5 {
            background: #FAF1D0;
            color: #DC9A04;
          }

          &.wechat {
            background: rgba(64, 194, 73, 0.16);
            color: #40C249;
          }

          &.pc {
            background: rgba(100, 64, 194, 0.16);
            color: #6440C2;
          }
        }
      }

      .bd {
        margin-top: 3px;
        font-size: 12px;
        color: #8E959E;
      }
    }

    .right-box {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      color: #8E959E;

      .num {
        margin-right: 12px;
      }
    }
  }
}

.chart-scroll {
  margin-top: -10px;
}

.search_box {
  margin: 10px 5px 0 5px;
}

.ivu-input-wrapper {
    /deep/ .ivu-poptip-body {
        padding: 0;
    }

    /deep/ .ivu-tabs-nav {
        float: none;
        display: inline-block;

        .ivu-tabs-ink-bar {
            background-color: #1890FF;
        }
    }

    /deep/ .ivu-tabs-tab {
        height: 50px;
        padding: 0 16px;
        line-height: 50px;

        &.ivu-tabs-tab-focused {
            color: #1890FF;
        }
    }

    .ivu-tabs-tabpane {
        display: flex;
        flex-direction: column;
        min-height: 300px;
        padding: 14px;

        .item-group {
            flex: 1;
            min-height: 0;
        }

        .item {
            ~ .item {
                margin-top: 14px;
            }
        }

        .item-title {
            font-size: 13px;
            line-height: 18px;
            text-align: left;
            color: #333333;
        }

        .cell-group {
            margin: 12px -8px 0 0;
            text-align: left;
            white-space: normal;
        }

        .cell {
            display: inline-block;
            height: 28px;
            padding: 0 12px;
            border-radius: 2px;
            margin: 0 8px 8px 0;
            background-color: #EEEEEE;
            font-size: 13px;
            line-height: 28px;
            color: #333333;
            cursor pointer;

            &.on {
                background-color: #1890FF;
                color: #FFFFFF;
            }
        }

        .button-group {
            text-align: right;
        }

        .ivu-btn-primary {
            width: 76px;
            height: 28px;
            padding: 0;
            margin: 0;
            background-color: #1890FF;
            font-size: 13px;
            line-height: 26px;
            color: #FFFFFF;

            &.ivu-btn-ghost {
                margin-right: 10px;
                border-color: #1890FF;
                background-color: transparent;
                color: #1890FF;
            }
        }
    }
}
</style>

